<script setup>
import { ref } from "vue";
import Left from "./component/left.vue";
import Home from "./component/home.vue";
import horoscopeVue from "@/components/Horoscope.vue";
import { onMounted } from "vue";
let home = ref(null);
let left = ref(null);
let loading = ref(false);
let active = ref(0);
let successRoom = (e) => {
  loading.value = false;
  left.value.show(e);
};

let delSuccessRoom = (e) => {
  left.value.delSuccessRoom(e);
};

let inSuccessRoom = (e) => {
  left.value.inSuccessRoom(e);
};

onMounted(() => {});
let getImageUrl = (name) => {
  // 请注意，这不包括子目录中的文件
  return new URL(`/src/image/${name}`, import.meta.url).href;
};
</script>

<template>
  <div class="box">
    <!-- <div class="left_box">
      <Left ref="left" />
    </div>
    <div class="home_box">
      <Home
        ref="home"
        @delSuccessRoom="delSuccessRoom"
        @inSuccessRoom="inSuccessRoom"
        @successRoom="successRoom" />
    </div> -->
    <div class="carouselBox">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
          <img
            style="width: 100%; height: 100%"
            :src="getImageUrl('16pic_8664261_b.jpg')" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="btn">
      <el-button type="primary" @click="active = 0">星座运势</el-button>
    </div>
    <horoscopeVue v-show="active == 0" />
  </div>
</template>

<style scoped>
.box {
  padding:20px 0px;
}

.carouselBox {
  padding: 30px 20px 20px;
  box-sizing: border-box;
}
.left_box {
  margin-right: 10px;
}
.home_box {
  width: 100%;
}
.btn {
  padding: 10px;
}
</style>
